
<!--  管理框架  -->

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px" style="background-color: #545c64;height: 100vh">
                <el-menu
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    class="el-menu-vertical-demo"
                    default-active="1"
                    text-color="#fff"
                    router
                >
                    <el-menu-item index="/manage" @click="choosePage('首页')">
                        <el-icon><Menu /></el-icon><span>社区首页</span>
                    </el-menu-item>
                    <el-menu-item v-for="menu in menuList" :index="menu.path" @click="choosePage(menu.label)">
                        <el-icon v-if="menu.key === 1"><User /></el-icon>
                        <el-icon v-if="menu.key === 2"><ChatDotRound /></el-icon>
                        <el-icon v-if="menu.key === 3"><Cpu /></el-icon>
                        <el-icon v-if="menu.key === 4"><Sell /></el-icon>
                        <el-icon v-if="menu.key === 5"><Tickets /></el-icon>
                        <el-icon v-if="menu.key === 6"><House /></el-icon>
                        <span>{{ menu.label }}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header id="myHeader">
                    <el-breadcrumb separator="/" style="font-size: 1em;margin-top: 30px;">
                        <el-breadcrumb-item>游戏玩家社区后台系统</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ currentPageName }}</el-breadcrumb-item>
                    </el-breadcrumb>
<!--                    <router-link to="/manage/postListBack">列表</router-link>-->
<!--                    <router-link to="/manage/postDeatlBack">》》》详情</router-link>-->
<!--                    <button @click="toList()">《《列表》》</button>-->
<!--                    <button @click="toDetail()">《《详情》》</button>-->
                    <el-button @click="backToLogin()">退出登录</el-button>

                    <el-divider style="border-color: black" />
                </el-header>
                <el-main>

<!--                 主体内容   -->

                    <router-view name="ManageIn" />

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import {ref} from "vue";
import {
    Setting, Menu, User, ChatDotRound, Cpu, House, Sell, Tickets
} from "@element-plus/icons-vue";
import PostBack from "@/components/pages/backend/PostBack.vue";
import OrderBack from "@/components/pages/backend/OrderBack.vue";
import UserBack from "@/components/pages/backend/UserBack.vue";
import GameBack from "@/components/pages/backend/GameBack.vue";
import ActivityBack from "@/components/pages/backend/ActivityBack.vue";
import CommodityBack from "@/components/pages/backend/CommodityBack.vue";
import NoneBack from "@/components/pages/backend/NoneBack.vue";
import router from "@/api/routerConfig";



const menuList = ref([
    {key: 1, label: "用户管理", path: "/userBack"},
    {key: 2, label: "交流帖管理", path: "/postBack"},
    {key: 3, label: "游戏管理", path: "/gameBack"},
    {key: 4, label: "订单管理", path: "/orderBack"},
    {key: 5, label: "活动管理", path: "/activityBack"},
    {key: 6, label: "社区管理", path: "/communityBack"},
])
const currentPageName = ref("首页")

function choosePage(choose) {
    currentPageName.value = choose
}

function toList() {
    router.push("/postBack")
}
function toDetail() {
    router.push("/postDetailBack")
}

function backToLogin() {
    router.replace("/")
}

</script>

<style scoped>

#myHeader {
    height: 80px;
    /*background-color: #66b1ff;*/
    border-color: black;
    border-width: 100px;
}

</style>